<template>
  <div class="info">
    <el-row>
        <el-col :span="24" class="col-name">
            <div class="section-title">基本信息</div>
            <div>姓名：猪猪侠</div>
            <div>性别：男</div>
            <div>段位：钻石</div>
            <div class="block">
                <span class="title">头像：</span>
                <el-avatar shape="square" :size="100" :src="url"></el-avatar>
            </div>
            <router-link :to="'change?id='+id">
            <el-button type="primary" style="margin:15px 0 0 15px;">修改信息</el-button>
            </router-link>
        </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    data() {
      return {
        url: '',
        id:''
      }
    },
    created(){
        this.id = JSON.parse(localStorage.getItem("access-id"));
        console.log(this.id);
        
        this.axios.get("user/deatil/"+this.id).then(res=>{
            console.log("个人信息：",res);
            this.url = res.data.data.avatar;
            console.log("url:",this.url);
            
        })
    },

 watch: {
    //侦听器  转化查询params为自己定义要传到后台的参数
    $route: function(to, from) {
      
    }
  }
}
</script>

<style scoped>
.section-title {
  border-bottom: solid 1px #f0f0f0;
  padding: 10px 10px;
  color: #acacac;
  background-color: #fbfbfb;
  margin: 10px 0;
}
.info{
    text-align: left;
}
.col-name div{
    padding: 15px;
}
</style>